<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<style>
    .container {
        width: 100%;
    }
</style>

<div id="member-add-app" class="addBrand-container">
    <div class="container">
        <form class="el-form demo-ruleForm">
            <div class="el-form-item is-required">
                <label for="name" class="el-form-item__label" style="width: 180px;">标题:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="text" autocomplete="off" placeholder="请输入标题" maxlength="20" class="el-input__inner" id="name">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required">
                <label for="date" class="el-form-item__label" style="width: 180px;">创建时间:</label>
                <div class="el-form-item__content" style="margin-left: 180px;">
                    <div class="el-input">
                        <input type="date" autocomplete="off" placeholder="请输入创建时间" maxlength="20" class="el-input__inner" id="date">
                    </div>
                </div>
            </div>
           <div>
               <div class="el-form-item is-required">
                   <label for="img" class="el-form-item__label" style="width: 180px;">图片:</label>
                  <!-- style="margin-left: 180px;"-->
                   <div class="el-form-item__content">
                       <div class="avatar-uploader">
                           <div tabindex="0" class="el-upload el-upload--text">
                               <i class="el-icon-plus avatar-uploader-icon"></i>
                               <input type="file" name="file" id="itemImgId" class="el-upload__input" onchange="upload()">
                           </div>
                       </div>
                       <div class="img-upload">
                           <img id="itemImg" style="display: none;position: absolute;top: 0px;left: 178px" width="261px" height="165pox">
                       </div>
                   </div>·
               </div>
           </div>
            <div class="subBox address">
                <div class="el-form-item">
                    <div class="el-form-item__content" style="margin-left: 180px;">
                        <button type="button" class="el-button el-button--default">
                            <span>取消</span>
                        </button>
                        <button type="button" class="el-button el-button--primary">
                            <span>保存</span>
                        </button>
                        <button type="button" class="el-button continue el-button--primary">
                            <span>保存并继续添加</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="api/member/member.js"></script>
<script>
    $(function(){
        loadRolesData();//初始加载角色数据
        $(".el-button--default").on("click",backToItemList);
        $(".el-button--primary").on("click",saveAddOrUpdate);
    })

    //修改或添加标题图片
    function saveAddOrUpdate(){
        var addCar="carousel/addCar";
        var updateCar="carousel/updateCar"
        var name =$("#name").val();
        var date=$("#date").val();
        var itemImg=$("#itemImg").attr("src");
        if(!name){
            commonShowTips("请填写内容!");
            return;
        }
        var params={
            carouselTitle:name,
            createdTime:date,
            carouselImg:itemImg
        };
        var url =!$("#cIframe").data("carId") ? addCar : updateCar;

        if($("#cIframe").data("carId")){
            params.id = $("#cIframe").data("carId");
        }
        debugger;
        $.get(url,params,function (result){
            commonShowTips(result.message);
            backToItemList();
        })
    }
   //上传图片
    function upload(){
        var uploadFile = $("#itemImgId").get(0).files[0];
        var formData = new FormData();
        //key的名字自定义，value为文件控件对象
        formData.append("file",uploadFile);
        $.ajax({
            url:"upload/upload",
            data:formData,
            dateType:"json",
            type:"post",
            //提交参数之前是否把参数转换为字符串：true--是，false--不是，默认是true
            processData:false,
            //提交之前，是否把参数统一按URLEncoded编码:true--是，false--不是，默认是true
            contentType:false,
            success:function(result){
               $("#itemImg").attr("src",result);
               $("#itemImg").show();
            }
        })
    }
    //初始加载角色数据
    function loadRolesData(){
        var url = "carousel/findAll";
        $.get(url,{},function (result){
            result = result.data;
            for(var i in result){
                var id = result[i].id;
                var str ="<li class='role-li' style='list-style-type: none ;float: left' >"
                    + "<input type='checkbox' value='role"+ id + "' id='role"+ id + "'>"
                    + "<label for='role"+ id +"'>" + result[i].carName + "</label></li>"
                $(".roles-ul").append(str)
            }
            if ($("#cIframe").data("carousel")){
                //如果是修改就填充数据
                initUpdataNoticeData();
            }
        })
    }
    //修改
    function initUpdataNoticeData(){
        var carousel = $("#cIframe").data("carousel");
        $("#name").val(carousel.carouselTitle);
        $("#date").val(carousel.createdTime);
        $("#itemImgId").attr("src",carousel.carouselImg);
       //var param ={carId:$("#cIframe").data("carousel").id}
        //$("#data").attr("readonly", "readonly");
    }

    function backToItemList() {
        $("#cIframe").data("carousel","");
        $("#cIframe").load("carousel/list");
    }
</script>